<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-form-item prop="code">
          <el-input v-model="filters.code" placeholder="活动ID/活动名称"></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-search"
            :label="$t('action.search')"
            type="primary"
            @click="findPage(null)"
          />
        </el-form-item>
        <el-form-item>
          <kt-button
            :label="$t('action.reset')"
            type="primary"
            @click="resetForm('filters')"
          />
        </el-form-item>
        <el-form-item>
          <kt-button label="新增" type="primary" @click="handleAdd" />
          <kt-button label="使用模板" type="primary" @click="handleTem" />
        </el-form-item>
      </el-form>
    </div>
    <div
      class="toolbar"
      style="float:right;padding-top:10px;padding-right:15px;"
    >
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button
                icon="fa fa-refresh"
                @click="findPage(null)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button
                icon="fa fa-filter"
                @click="displayFilterColumnsDialog"
              ></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :highlightCurrentRow="true"
      :content="pageResult"
      :totalSize="totalSize"
      :columns="filterColumns"
      :showSelection="false"
      :showBatchDelete="false"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      ref="CyTable"
    >
    </cy-table>

    <!--新增编辑界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      width="40%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input
            v-model="dataForm.id"
            :="true"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="dataForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="审批人" prop="approver">
          <el-select v-model="dataForm.approver" placeholder="请选择" style="width: 621px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="mulu">
          <el-select v-model="dataForm.mulu" placeholder="请选择"  style="width: 621px">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <el-select v-model="dataForm.type" placeholder="请选择"  style="width: 621px">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动" prop="activity">
          <el-select v-model="dataForm.activity" placeholder="请选择"  style="width: 621px">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人群" prop="people">
          <el-select v-model="dataForm.people" placeholder="请选择"  style="width: 621px">
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否存为模板" prop="template">
          <el-radio v-model="dataForm.template" label="1">是</el-radio>
          <el-radio v-model="dataForm.template" label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input   type="textarea" v-model="dataForm.remark" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisible = false">{{
          $t("action.cancel")
        }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
          >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>

    <!--编辑界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      width="80%"
      :visible.sync="dialogEditVisible"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="活动基本信息" name="first">
          <el-form
            :model="dataFormEdit"
            label-width="100px"
            ref="dataFormEdit"
            :size="size"
          >
          <el-row>
            <el-col :span="12">
              <el-form-item label="活动名称">
                <el-input v-model="dataFormEdit.test1"  auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动ID">
              <el-input v-model="dataFormEdit.test2"  auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item label="活动分组" >
                  <el-input v-model="dataFormEdit.test3"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="营销对象类型">
                  <el-input v-model="dataFormEdit.test4"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                  <el-form-item label="运行时间" >
                    <el-input v-model="dataFormEdit.test5"  auto-complete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="活动状态" >
                    <el-input v-model="dataFormEdit.test6"   auto-complete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="备注" >
                  <el-input v-model="dataFormEdit.test7"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <hr>
            <span>创建信息</span>
            <el-row>
              <el-col :span="12">
                <el-form-item label="创建人">
                  <el-input v-model="dataFormEdit.test8"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <el-input v-model="dataFormEdit.test9"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="活动所属组织">
                  <el-input v-model="dataFormEdit.test10"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <hr>
            <span>审批信息</span>
            <el-row>
              <el-col :span="12">
                <el-form-item label="审批人">
                  <el-input v-model="dataFormEdit.test11"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审批时间">
                  <el-input v-model="dataFormEdit.test12"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="审批结果">
                  <el-input v-model="dataFormEdit.test13"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审批备注">
                  <el-input v-model="dataFormEdit.test14"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="设置活动流程" name="second">   <el-form
          :model="dataFormEdit"
          label-width="100px"
          ref="dataFormEdit2"
          :size="size"
        >
          <span>触发时机</span>
          <el-row>
              <el-form-item label="触发时机选择">
                <el-input v-model="dataFormEdit2.test1"  auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="过滤条件">
                <el-input v-model="dataFormEdit2.test2"  auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="时机控制" >
                <el-radio v-model="dataFormEdit2.test3" label="1">启用</el-radio>
                <el-radio v-model="dataFormEdit2.test3" label="2">禁用</el-radio>
              </el-form-item>
          </el-row>
          <hr>
          <span>目标客群</span>
          <el-row>
              <el-form-item label="营销对象类型" >
                <el-input v-model="dataFormEdit2.test5"  auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="删选条件" >
                <el-button type="primary">添加条件</el-button>
              </el-form-item>
          </el-row>
          <hr>
          <span>营销动作</span>
          <el-row>
              <el-form-item label="动作类型">
                <el-input v-model="dataFormEdit2.test8"  auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="卡券项目">
                <el-input v-model="dataFormEdit2.test9"  auto-complete="off" style="width: 1300px"></el-input> <el-button type="primary">预览</el-button>
              </el-form-item>
              <el-form-item label="触发身份标识">
                <el-input v-model="dataFormEdit2.test10"  auto-complete="off"></el-input>
              </el-form-item>
          </el-row>
        </el-form>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="third"> <el-table
          :data="tableData"
          >
          <el-table-column
            prop="test1"
            label="操作时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="test2"
            label="操作类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="test3"
            label="操作人">
          </el-table-column>
          <el-table-column
            prop="test4"
            label="备注">
          </el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="活动报告" name="fourth"> <el-main>
          <div style="width:100%;height:450px;border-color:red;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
            <div class="toolbar" id="lineChart"
                 style="float:left;padding-top:20px;padding-left:20px;width:1000px;height:400px">
            </div>
          </div>
        </el-main></el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogEditVisible = false">{{
          $t("action.cancel")
          }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormEdit"
          :loading="editLoading"
        >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
  <!--使用模板-->
    <el-dialog
      title="使用模板"
      width="60%"
      :visible.sync="dialogTemVisible"
      :close-on-click-modal="false"
    >
      <el-table
        :data="tableData1"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="test1"
          label="模板Id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="test2"
          label="模板名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="test3"
          label="创建时间">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogTemVisible = false">{{
          $t("action.cancel")
          }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormTem"
          :loading="editLoading"
        >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/ProductTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      selectionsTem:[],
      dialogTemVisible:false,
      tableData1:[{test1:"10001",test2:"测试模板",test3:"2020-03-26",test4:"测试数据"},{test1:"10001",test2:"测试模板1",test3:"2020-03-24",test4:"测试数据"}],
      mylineLegend: ['活动报告'],
      mylineseriesdatas:[{name:'昨天',data:[175,70,28,26,9,5,2]}],
      mylineXAxisData: ["2019-12-24", "2019-12-25", "2019-12-26", "2019-12-27", "2019-12-28", "2019-12-29", "2019-12-30"],
      tableData:[{test1:"2019-12-24",test2:"终止",test3:"张三",test4:"测试数据"},{test1:"2019-12-24",test2:"审核通过",test3:"李四",test4:"测试数据"}],
      dataFormEdit2:{
        test1:"Vip8",
        test2:"Vip以下会员",
        test3:"1",
        test4:"类型一",
        test5:"添加条件",
        test6:"发放优惠卷",
        test7:"",
        test8:"动作类型一",
        test9:"测试卡卷项目",
        test10:"Vip",
      },
      dataFormEdit:{
        test1:"测试活动名称1",
        test2:"1066668",
        test3:"测试分组1",
        test4:"类型1",
        test5:"2019-12-25",
        test6:"审核通过",
        test7:"这是活动备注",
        test8:"张三",
        test9:"2020-03-25 19:47:29",
        test10:"APEC",
        test11:"李四",
        test12:"2020-03-25 19:47:29",
        test13:"审核通过",
        test14:"这是审批备注",
      },
      dialogEditVisible:false,
      activeName:"first",
      options4: [{
        value: '1',
        label: '老人'
      }, {
        value: '2',
        label: '青年'
      }, {
        value: '3',
        label: '小孩'
      }],
      options3: [{
        value: '1',
        label: '活动'
      }, {
        value: '2',
        label: '活动'
      }, {
        value: '3',
        label: '活动'
      }],
      options2: [{
        value: '1',
        label: '类型1'
      }, {
        value: '2',
        label: '类型2'
      }, {
        value: '3',
        label: '类型3'
      }],
      options1: [{
        value: '1',
        label: '目录1'
      }, {
        value: '2',
        label: '目录2'
      }, {
        value: '3',
        label: '目录3'
      }],

      options: [{
        value: '1',
        label: '张三'
      }, {
        value: '2',
        label: '李四'
      }, {
        value: '3',
        label: '王二'
      }],
      size: "small",
      filters: {
        code: "",
        name: ""
      },
      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      totalSize: 0,
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      dataFormRules: {
        approver: [{ required: true, message: "请选择审批人", trigger: "change" }],
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      // 新增编辑界面数据
      dataForm: {
        approver: "",
        name: "",
        mulu:"",
        type:"",
        remark:"",
        template:"1",
        people:"",
        activity:""
      }
    };
  },

  methods: {
    submitFormEdit:function(){
      this.dialogEditVisible=false
      this.$message({ message: "操作成功", type: "success" });
    },
    submitFormTem:function(){
      if(this.selectionsTem.length==0){
        this.$message({ message: "请选择要操作的数据", type: "error" });
      }else{
        this.$message({ message: "操作成功", type: "success" });
        this.dialogTemVisible=false
      }
    },
    handleSelectionChange:function(params){
      this.selectionsTem=params
    },

    handleTem:function(){
      this.selectionsTem=[]
     this.dialogTemVisible=true
    },
    handleClick:function(param){
      if(param="forth"){
        this.$mychart.myLineChartMutSmooth('lineChart',this.mylineLegend,this.mylineXAxisData, this.mylineseriesdatas, "活动报告");
      }
    },
    handleDelete:function(){
      this.$message({ message: "操作成功", type: "success" });
    },
    // 获取分页数据
    findPage: function(params) {
      let this_ = this;
      if (params == undefined || params == null) {
        params = {
          pageNum: this_.pageRequest.pageNum,
          pageSize: this_.pageRequest.pageSize
        };
      }
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = params.pageNum;
      this_.filters.limit = params.pageSize;
      this.utils.request.queryProductUnits(this_.filters, function(res) {
        if (res.data.rows == null) {
          res.data.rows = [];
        }
        this_.pageResult =[{
          id: "100068",
          createTime: "2020-03-25 19:47:29",
          name: "测试活动",
          creatorName: "贺同学",
          type: "春节活动",
          approver: "张老板",
          status:"完成",
        },{
          id: "100069",
          createTime: "2020-03-22 19:47:29",
          name: "国庆活动",
          creatorName: "王老板",
          type: "国庆活动",
          approver: "赵老板",
          status:"设计中",

        }];
        this_.totalSize = 2;
      });
    },
    // 显示新增界面
    handleAdd: function() {
      this.dataForm={
        approver: "",
        name: "",
        mulu:"",
        type:"",
        remark:"",
        template:"1",
        people:"",
        activity:""
      }
      this.dialogVisible = true;
      this.operation = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate();
      });

    },
    // 显示编辑界面
    handleEdit: function(params) {
      this.dialogEditVisible = true;

    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "id", label: "活动Id", minWidth: 120 },
        { prop: "name", label: "活动名称", minWidth: 120 },
        { prop: "type", label: "活动类型", minWidth: 120 },
        { prop: "createTime", label: "创建时间", minWidth: 120 },
        { prop: "creatorName", label: "创建人", minWidth: 120 },
        { prop: "approver", label: "审批人", minWidth: 120 },
        { prop: "status", label: "活动状态", minWidth: 120 },
      ];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.findPage();
    },
    submitForm() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$message({ message: "操作成功", type: "success" });
          this.dialogVisible = false;
        }
      });
    },
  },
  mounted() {
    this.initColumns();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner   {
  width: 200px !important;
}
</style>
